<template>
  <div class="layout">
    <!-- 面包屑导航区域 -->
    <div class="breadcrumb">
      <ul>
        <li
          v-for="(crumb, index) in breadcrumbs"
          :key="index"
          :style="breadcrumbItemStyle"
        >
          <router-link
            v-if="index !== breadcrumbs.length - 1"
            :to="crumb.path"
            style="text-decoration: none; color: inherit;"
          >
            {{ crumb.label }}
          </router-link>
          <span v-else>{{ crumb.label }}</span>
        </li>
      </ul>
    </div>

    <!-- 主体布局部分：侧边栏 + 主要内容 -->
    <div class="content-wrapper">
      <aside class="sidebar">
        <!-- 用户信息区域 -->
        <div class="user-info">
          <img :src="userAvatar" alt="用户头像" class="avatar" />
          <p class="username">{{ username }}</p>
          <p class="login-time">{{ loginTime }}</p>
        </div>

        <hr class="divider">

        <!-- 侧边栏导航 -->
        <ul class="nav-links">
          <li>
            <router-link to="/student/studentset" exact>个人设置</router-link>
          </li>
          <li>
            <router-link to="/student/class" exact>教学课堂</router-link>
          </li>
          <li>
            <router-link to="/student/PPT" exact>收藏课件</router-link>
          </li>
          <li>
            <router-link to="/student/word" exact>收藏文档</router-link>
          </li>
          <li>
            <router-link to="/student/videos" exact>收藏视频</router-link>
          </li>
          <li>
            <router-link to="/student/practice" exact>收藏图片</router-link>
          </li>
          <li>
            <router-link to="/student/questionbank" exact>星标题目</router-link>
          </li>
        </ul>
      </aside>

      <!-- 主要内容部分 -->
      <div class="main-content">
        <router-view /> <!-- 渲染子页面的内容 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StudentLayout',
  props: {
    username: {
      type: String,
      default: '学生'
    },
    userAvatar: {
      type: String,
      default: 'https://via.placeholder.com/80'
    },
    loginTime: {
      type: String,
      default: () => new Date().toLocaleString()
    }
  },
  data() {
    return {
      // 可以在此添加更多数据属性
    };
  },
  computed: {
    breadcrumbs() {
      // 根据当前路由动态生成面包屑
      return this.$route.matched.map(route => ({
        path: route.path,
        label: route.meta.breadcrumb || route.name
      }));
    },
    breadcrumbItemStyle() {
      return {
        textDecoration: 'none',
        color: 'rgba(51, 51, 51, 0.926)',
        fontWeight: 'bold',
        fontSize: '14px'
      };
    }
  }
};
</script>

<style scoped>
.layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #F2F2F2;
  min-height: 100vh;
}

/* 面包屑导航单独占一行 */
.breadcrumb {
  background-color: #f8f9fa;
  padding: 10px;
  font-size: 14px;
  border-bottom: 1px solid #ddd;
  width: 100%;
}

.breadcrumb ul {
  list-style: none;
  display: flex;
  gap: 5px;
  margin-left: 8%;
}

.breadcrumb li::after {
  content: " / ";
  margin-left: 5px;
}

.breadcrumb li:last-child::after {
  content: "";
}

/* 主体布局部分 */
.content-wrapper {
  display: flex;
  flex-grow: 1;
  width: 80%;
  margin-top: 20px;
  margin-bottom: 60px;
}

/* 侧边栏样式 */
.sidebar {
  width: 240px;
  background-color: #fff;
  border-right: 1px solid #E4E4E4;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  height: 100%;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);

}

/* 用户信息区域 */
.user-info {
  text-align: center;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.username {
  color: rgba(51, 51, 51, 0.926);
  font-weight: bold;
  font-size: 15px;
  margin: 5px 0;
}

.login-time {
  color: rgba(51, 51, 51, 0.926);
  font-size: 12px;
  margin: 5px 0;
}

/* 分割线样式 */
.divider {
  border: 1px solid #E4E4E4;
  width: 60%;
  margin: 10% 20% 5% 20%;
}

/* 导航链接样式 */
.nav-links {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.nav-links li {
  width: 100%;
}

.nav-links a {
  text-decoration: none;
  color: rgba(51, 51, 51, 0.926);
  font-weight: 500;
  display: block;
  padding: 8px 10px;
  padding-left: 20%;
  transition: background-color 0.3s;
  font-size: 14px;
}

.nav-links a:hover {
  background-color: #f0f0f0;
}

.nav-links a.router-link-active {
  color: #244382;
  border-left: 3px solid #2E508F;
  margin-left: -3px;
  font-weight: bold;
}

/* 主要内容区域样式 */
.main-content {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: white;
  border-radius: 10px;
  margin-left: 20px;
}
</style>
